<template>
    <div>
        <!-- 顶部区域 -->
       <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll">
                <a :class="['mui-control-item', item.id == 0 ? 'mui-active' : '']" v-for="item in categorys" :key='item.id'
                @click="getpictures(item.id)">
                    {{ item.title }}
                </a>
                
            </div>
       </div>

      <!-- 图片列表区域 -->
        <ul>
            <li v-for="item in list" :key="item.id">
              <img v-lazy="item.img_url">
            </li>
        </ul>
    </div>
</template>

<script>
import { Toast } from "mint-ui";
import mui from "../../lib/mui/js/mui.js";
export default {
  data() {
    return {
      categorys: [], //所有图片分类列表的数组
      list: [] //图片列表数组
    };
  },
  created() {
    this.getcategorys();
    this.getpictures(0); //默认进入页面就自动请求数据
  },
  mounted() {
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0007, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
      bounce: true
    });
  },
  methods: {
    //1.获取顶部滑块条的列表
    getcategorys() {
      this.$http.get("api/getimgcategory").then(res => {
        if (res.body.status === 0) {
          res.body.message.unshift({ title: "全部", id: 0 });
          this.categorys = res.body.message;
          // console.log(this.categorys)
        } else {
          Toast("获取图片分类列表失败");
        }
      });
    },

    // 2.获取图片列表数据
    getpictures(cateid) {
      this.$http.get("api/getimages/" + cateid).then(res => {
        if (res.body.status === 0) {
          this.list = res.body.message;
          // console.log(this.list)
        } else {
          Toast("获取图片列表失败!");
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  touch-action: pan-y;
}
</style>
